<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>交互式产品展示</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .product-container {
            display: flex;
            gap: 30px;
        }
        
        .product-images {
            width: 60%;
        }
        
        .main-image {
            width: 100%;
            height: 400px;
            object-fit: contain;
            border: 1px solid #ddd;
            margin-bottom: 10px;
        }
        
        .thumbnail-container {
            display: flex;
            gap: 10px;
        }
        
        .thumbnail {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border: 2px solid transparent;
            cursor: pointer;
        }
        
        .thumbnail.active {
            border-color: #4CAF50;
        }
        
        .product-info {
            width: 40%;
        }
        
        .product-title {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .product-price {
            font-size: 20px;
            font-weight: bold;
            color: #e53935;
            margin-bottom: 20px;
        }
        
        .color-options {
            margin-bottom: 20px;
        }
        
        .color-title {
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .color-circle {
            display: inline-block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
            cursor: pointer;
            border: 2px solid transparent;
        }
        
        .color-circle.active {
            border-color: #333;
        }
        
        .size-options {
            margin-bottom: 20px;
        }
        
        .size-title {
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .size-button {
            display: inline-block;
            padding: 8px 15px;
            margin-right: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        
        .size-button.active {
            background-color: #4CAF50;
            color: white;
        }
        
        .stock-status {
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        
        .in-stock {
            background-color: #e8f5e9;
            color: #2e7d32;
        }
        
        .out-of-stock {
            background-color: #ffebee;
            color: #c62828;
        }
        
        .add-to-cart {
            padding: 12px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        
        .add-to-cart:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="product-container">
            <!-- 产品图片区域 -->
            <div class="product-images">
                <!-- 主图 -->
                <img 
                    :src="currentImage" 
                    :alt="product.name + ' - ' + selectedColor.name"
                    class="main-image"
                >
                
                <!-- 缩略图 -->
                <div class="thumbnail-container">
                    <img 
                        v-for="(image, index) in product.images" 
                        :key="index"
                        :src="image.thumbnail" 
                        :alt="product.name"
                        class="thumbnail"
                        :class="{ active: currentImageIndex === index }"
                        @click="changeImage(index)"
                    >
                </div>
            </div>
            
            <!-- 产品信息区域 -->
            <div class="product-info">
                <h1 class="product-title">{{ product.name }}</h1>
                <div class="product-price">¥{{ product.price }}</div>
                
                <!-- 颜色选择 -->
                <div class="color-options">
                    <div class="color-title">颜色选择</div>
                    <div 
                        v-for="color in product.colors" 
                        :key="color.id"
                        class="color-circle"
                        :style="{ backgroundColor: color.code }"
                        :class="{ active: selectedColor.id === color.id }"
                        @click="selectColor(color)"
                    ></div>
                </div>
                
                <!-- 规格选择 -->
                <div class="size-options">
                    <div class="size-title">规格选择</div>
                    <div 
                        v-for="size in product.sizes" 
                        :key="size"
                        class="size-button"
                        :class="{ active: selectedSize === size }"
                        @click="selectSize(size)"
                    >
                        {{ size }}
                    </div>
                </div>
                
                <!-- 库存状态 -->
                <div 
                    class="stock-status"
                    :class="{ 'in-stock': product.inStock, 'out-of-stock': !product.inStock }"
                    v-show="product.inStock !== undefined"
                >
                    {{ product.inStock ? '有现货，可立即发货' : '暂时缺货' }}
                </div>
                
                <!-- 添加到购物车 -->
                <button 
                    class="add-to-cart"
                    @click="addToCart"
                    :disabled="!product.inStock"
                >
                    {{ product.inStock ? '加入购物车' : '暂时缺货' }}
                </button>
            </div>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                product: {
                    id: 1,
                    name: '时尚运动鞋',
                    price: 599,
                    images: [
                        { thumbnail: 'https://via.placeholder.com/80x80?text=Thumb1', full: 'https://via.placeholder.com/600x600?text=Product1' },
                        { thumbnail: 'https://via.placeholder.com/80x80?text=Thumb2', full: 'https://via.placeholder.com/600x600?text=Product2' },
                        { thumbnail: 'https://via.placeholder.com/80x80?text=Thumb3', full: 'https://via.placeholder.com/600x600?text=Product3' },
                        { thumbnail: 'https://via.placeholder.com/80x80?text=Thumb4', full: 'https://via.placeholder.com/600x600?text=Product4' }
                    ],
                    colors: [
                        { id: 1, name: '黑色', code: '#000000' },
                        { id: 2, name: '白色', code: '#ffffff', border: '1px solid #ddd' },
                        { id: 3, name: '红色', code: '#e53935' },
                        { id: 4, name: '蓝色', code: '#1e88e5' }
                    ],
                    sizes: ['36', '37', '38', '39', '40', '41', '42'],
                    inStock: true
                },
                currentImageIndex: 0,
                selectedColor: { id: 1, name: '黑色', code: '#000000' },
                selectedSize: '38'
            },
            computed: {
                currentImage() {
                    return this.product.images[this.currentImageIndex].full;
                }
            },
            methods: {
                changeImage(index) {
                    this.currentImageIndex = index;
                },
                selectColor(color) {
                    this.selectedColor = color;
                    // 这里可以添加根据颜色改变图片的逻辑
                },
                selectSize(size) {
                    this.selectedSize = size;
                },
                addToCart() {
                    if (this.product.inStock) {
                        const item = {
                            productId: this.product.id,
                            name: this.product.name,
                            price: this.product.price,
                            color: this.selectedColor,
                            size: this.selectedSize,
                            image: this.currentImage,
                            quantity: 1
                        };
                        alert(`已添加到购物车：\n${item.name}\n颜色：${item.color.name}\n尺码：${item.size}\n价格：¥${item.price}`);
                        // 实际应用中这里会调用购物车的添加方法
                    }
                }
            }
        });
    </script>
</body>
</html>